var PaymentTardinessBoard = function () {
  var TableSettingForm = function () {
    var template = /* html */ `
      <div class="table-setting-form" v-loading.fullscreen.lock="loading">
        <check-group :data="config.fieldList" :size="4"></check-group>

        <div style="text-align:center;margin-top:20px">
          <el-button size="medium" type="primary" @click="ensure">确定</el-button>
          <el-button size="medium" type="danger" @click="cancel">取消</el-button>
        </div>
      </div>
    `;

    return {
      props: {
        hideColumns: {
          type: Array,
          required: true
        }
      },

      data: function () {
        var hideColumns = this.hideColumns;
        var config = new PaymentTardinessConfigModel(hideColumns);
        return {
          loading: false,
          config: config
        };
      },

      methods: {
        ensure: function () {
          var config = this.config;
          var hideColumns = config.getHideColumns();
          if (hideColumns === null) {
            this.$alert('请选择表格需要显示的列', '信息');
            return;
          }

          this.loading = true;
          var self = this;
          BoardUtil.saveHideColumns('paymentTardinessBoard', hideColumns).then(function () {
            self.loading = false;
            self.$alert('保存表格显示列配置成功', '信息', {
              callback: function () {
                self.$emit('update:hideColumns', hideColumns);
                self.$emit('setting-success', hideColumns);
              }
            });
          }).catch(function () {
            self.loading = false;
          });
        },

        cancel: function () {
          this.$emit('close');
        }
      },

      components: {
        CheckGroup: CheckGroup
      },

      template: template
    };
  }();

  var template = /* html */ `
    <div class="payment-tardiness-board" v-loading.fullscreen.lock="loading">
      <search-btns>
        <template slot="append">
          <div>
            <el-button size="medium" type="primary" @click="tableSetting">设置显示列</el-button>
          </div>
        </template>
      </search-btns>
      <div class="payment-tardiness-title">
        <span>付款拖期</span>
        <div class="payment-tardiness-stat" v-if="financeStat!==null">
          <span>总条数:{{financeStat.count}}</span>
          <span style="margin-left:5px">总欠额:{{financeStat.sumOweMoney}}</span>
        </div>
      </div>
      <div class="payment-tardiness-content" v-if="isShow" :key="tableId">
        <template v-if="financeList!==null">
          <payment-tardiness-table :finances="financeList" :hide-columns="hideColumns"></payment-tardiness-table>
        </template>

        <div v-else class="no-data">
          暂无付款拖期数据
        </div>
      </div>

      <el-dialog title="设置显示列" :visible.sync="openSetting" top="10vh" width="60%">
        <div style="height:calc(80vh - 54px);overflow:auto">
          <table-setting-form v-if="openSetting" :hide-columns.sync="hideColumns" @setting-success="settingSuccess" @close="openSetting=false">
          </table-setting-form>
        </div>
      </el-dialog>
    </div>
  `;

  return {
    mixins: [boardRunningMixin],

    data: function () {
      return {
        loading: false,
        isShow: false,
        financeList: null,
        financeStat: null,
        openSetting: false,
        hideColumns: [],
        tableId: SysUtil.getId()
      };
    },

    created: function () {
      this.loading = true;
      var self = this;

      Promise.all([
        this.setHideColumns(),
        this.setFinanceList(true)
      ]).then(function () {
        self.isShow = true;
        self.loading = false;
        self.boardRunning();
      }).catch(function () {
        self.isShow = true;
        self.loading = false;
      });
    },

    methods: {
      setFinanceList: function (hasAlert) {
        if (hasAlert === undefined) {
          hasAlert = false;
        }

        var self = this;
        return ajaxRequest('displayView/getReceivablesDelayData', {}, true, hasAlert).then(function (financeList) {
          financeList = _.orderBy(financeList, ['payTime'], ['asc']);

          var finances = [];
          for (var i = 0; i < financeList.length; i++) {
            var finance = financeList[i];
            var inOutMoney = finance.inOutMoney;
            var receiptPaymentPrice = finance.receiptPaymentPrice;
            var oweMoney = _.round(inOutMoney - receiptPaymentPrice, 2);
            if (oweMoney <= 0) {
              continue;
            }

            finance.oweMoney = oweMoney;
            finance = new PaymentTardinessInfo(finance);
            finance.rowIndex = i;
            finances.push(finance);
          }

          self.financeList = finances;
          self.calFinanceStat();
          return financeList;
        });
      },

      setHideColumns: function () {
        var self = this;
        return BoardUtil.getHideColumns('paymentTardinessBoard').then(function (data) {
          var hideColumns = data.columns;
          if (hideColumns === undefined) {
            hideColumns = [];
          }
          self.hideColumns = hideColumns;
          return hideColumns;
        });
      },

      calFinanceStat: function () {
        var financeList = this.financeList;
        var sumOweMoney = _.sumBy(financeList, 'oweMoney');
        sumOweMoney = _.round(sumOweMoney, 2);
        this.financeStat = {
          count: financeList.length,
          sumOweMoney: sumOweMoney
        };
      },

      boardRunning: function () {
        this.clearTimeoutList();

        this.resetFinanceList();
      },

      resetFinanceList: function () {
        var self = this;
        var timeout = setTimeout(function () {
          self.setFinanceList().then(function () {
            self.resetFinanceList();
          }).catch(() => {});
          self.timeoutList[0] = null;
        }, 30 * 60 * 1000);
        this.timeoutList[0] = timeout;
      },

      tableSetting: function () {
        this.openSetting = true;
      },

      settingSuccess: function () {
        this.openSetting = false;
        this.tableId = SysUtil.getId();
      }
    },

    components: {
      SearchBtns: SearchBtns,
      PaymentTardinessTable: PaymentTardinessTable,
      TableSettingForm: TableSettingForm
    },

    template: template
  };
}();
